<template>
  <div>
    <div class="counter_warp">
      <div class="topImg" v-if="avatarurl">
        <!-- :style="{background:'url('+avatarurl+') no-repeat center center/cover'}" -->
        <div class="profile" @click="throttle(chooseImg(),5000)">
          <div class="_image_wrap">
            <img :src="avatarurl" alt />
          </div>
        </div>
        <div class="changeImg" @click="throttle(chooseImg(),5000)">更换头像</div>
      </div>
      <div class="iptWrap">
        <span>微信 :</span>
        <input type="text" title="微信" placeholder="微信号" v-model="wx" />
      </div>
      <div class="iptWrap">
        <span>邮箱 :</span>
        <input type="text" title="邮箱" placeholder="邮箱" v-model="email" @blur="checkRegexp" />
      </div>
      <div class="iptWrap">
        <span>职称 :</span>
        <input type="text" title="职称" placeholder="职称" v-model="title" />
      </div>
      <label for="text" class="textArea">
        <span>简介 ：</span>
        <div class="textBox">
          <textarea
            type="textarea"
            id="text"
            placeholder="请输入您的简介 (不超过20个字符)"
            maxlength="20"
            wrap="hard"
            v-model="brief"
          />
        </div>
      </label>
      <div @click="getInStorage" class="getIn">保存</div>
      <i-message id="message" />
    </div>
  </div>
</template>

<script>
const { $Message } = require("../../../static/dist/base/index");
export default {
  data() {
    return {
      wx: "",
      title: "",
      avatarurl: "",
      brief: "",
      email: "",
      openid: ""
    };
  },
  created() {
    console.log("create");
  },

  onLoad: function(options) {
    let that = this;
    //storage中取出个人数据
    wx.getStorage({
      key: "userInfo",
      success(res) {
        // console.log("storage内的url++++>"+res.data.avatarurl);
        that.avatarurl = res.data.avatarurl;
        that.title = res.data.title;
        that.wx = res.data.WX;
        that.brief = res.data.brief;
        that.email = res.data.email;
        that.openid = res.data.openid;
      }
    });
  },
  methods: {
    //修改个人数据  上传并更新storage
    getInStorage() {
      let data = {
        wx: this.wx,
        title: this.title,
        brief: this.brief,
        email: this.email,
        openid: this.openid
      };
      this.$store.commit("getSettingData", data); //更新storage内 邮箱 wx  职称信息
      let that = this;
      console.log(that.avatarurl.indexOf("http"));
      
      if (that.avatarurl.indexOf("http") != -1) {
        wx.downloadFile({
          url: that.avatarurl,
          success(res) {
            console.log("download");
            that.avatarurl = res.tempFilePath;
            console.log(that.avatarurl);
            console.log("download");
            that.$store.commit("getUrl", res.tempFilePath);
            that.judgment();
          }
        });
      } else {
        that.judgment();
      }
      setTimeout(() => {}, 500);
    },
    judgment() {
      console.log(this.wx, this.title, this.brief, this.email);

      if (
        !this.wx == "" &&
        !this.title == "" &&
        !this.brief == "" &&
        !this.email == ""
      ) {
        this.fileUpload();
      } else {
        $Message({
          content: "各部分不能为空",
          type: "error"
        });
      }
    },

    //UPLOADFILE
    fileUpload() {
      let that = this;
      wx.uploadFile({
        url: "https://wx.ssjx88.com/crminterface/Interf/userinfo_edit", //开发者服务器地址
        filePath: that.avatarurl || "", //本地临时路径
        name: "file", //文件对应的 key，开发者在服务端可以通过这个 key 获取文件的二进制内容
        formData: {
          //额外的form data
          wx: that.wx,
          title: that.title,
          brief: that.brief,
          email: that.email,
          openid: that.openid
        },
        header: {
          "Content-Type": "multipart/form-data"
        },
        success: function(res) {
          console.log(res.statusCode);
          console.log(res);
          if (res.statusCode == 200 || res.code == 200) {
            if (JSON.parse(res.data).errcode) {
              wx.showModal({
                title: "提示",
                content: "保存失败，请重试",
                success(res) {
                  if (res.confirm) {
                    console.log("用户点击确定");
                  } else if (res.cancel) {
                    console.log("用户点击取消");
                  }
                }
              });
            } else {
              that._getProfileData(that.openid);
            }
          } else {
            wx.showModal({
              title: "提示",
              content: "保存失败，请重试",
              success(res) {
                if (res.confirm) {
                  console.log("用户点击确定");
                } else if (res.cancel) {
                  console.log("用户点击取消");
                }
              }
            });
          }
          // console.log(JSON.parse(res.data));
        },
        fail: function() {
          // console.log(that.avatarurl);
        }
      });
    },
    //修改图片之后   重新openid获取url地址
    _getProfileData(data) {
      this.$apis.getProfileData(data).then(res => {
        console.log(res.msg.saleman_avatarurl);
        if (res.errcode) {
          console.log("获取失败");
        } else {
          this.url = res.msg.saleman_avatarurl;
          this.$store.commit("getUrl", res.msg.saleman_avatarurl);
          wx.showToast({
            title: "保存成功",
            icon: "success",
            duration: 2000
          });
        }
      });
    },
    chooseImg() {
      console.log("chooseImG");
      let that = this;
      wx.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success(res) {
          const tempFilePaths = res.tempFilePaths;
          console.log("当前选择的本地地址" + tempFilePaths[0]);
          that.avatarurl = tempFilePaths[0];
        }
      });
    },
    //邮箱正则验证
    checkRegexp() {
      if (
        !/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.email)
      ) {
        $Message({
          content: "邮箱格式错误",
          type: "error"
        });
      }
    },
    throttle(func, delay){
      let timer 
      return ()=>{
        let context=this,args=arguments;
        if(!timer){
          timer =setTimeout(() => {
              func.apply(context,args)
              timer=null
          }, delay);
        }
      }
    }
  }
};
</script>

<style  lang="scss">
.counter_warp {
  margin: 10px;
  .iptWrap {
    margin-left: 17px;
    height: 40px;
    line-height: 40px;
    display: flex;
    // margin-top: 20px;
    border-bottom: 1px solid #f1f1f1;
    align-items: center;
    position: relative;
    font: 600 14px Microsoft YaHei;
    color: #333;
    input {
      padding-left: 20px;
      width: 170px;
    }
  }
  // .ipt {
  //   border-bottom: 1px solid #fcfcfc;
  // }
  .topImg {
    height: 100px;
    margin-top: 10px;
    position: relative;
    margin-bottom: 20px;

    .profile {
      width: 90px;
      margin: 0 auto;
      height: 90px;
      border-radius: 50%;
      border: 2px solid #f1f1f1;
      overflow: hidden;
      ._image_wrap {
        width: 90px;
        height: 90px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
    }
    .changeImg {
      width: 70px;
      height: 16px;
      position: absolute;
      top: 76px;
      left: 142px;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.3);
      color: #fff;
      font-size: 12px;
    }
  }
  .textArea {
    margin: 14px;
    span {
      color: #495060;
      padding-left: 2px;
      font: 600 14px Microsoft YaHei;
    }
    .textBox {
      height: 280px;
      border: 1px solid #f1f1f1;
      margin: 10px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      color: #333;

      #text {
        margin: 16px;
        width: 280px;
        line-height: 20px;
        height: 250px;
      }
    }
  }
  .getIn {
    position: absolute;
    right: 16px;
    top: 10px;
    padding: 5px 10px;
    background-color: #fcfcfc;
    border: 1px solid #fcfcfc;
    font: 500 14px Microsoft YaHei;
  }
}
</style>
